<!-- double click panels functionality -->

	<div id="spendpanel" class="barChart2" style="width: 700px; height: 290px;"></div>
	<table id="dg" title="Spend Panels(Summary)" style="width: 700px; height: 270px" data-options="singleSelect:true,data:data" pagination="true">
		<thead>
			<tr>
				<th data-options="field:'itemid',width:150, align:'center'">Categories</th>
                <th data-options="field:'productid',width:139, align:'center'">Current YTD</th>
                <th data-options="field:'listprice',width:150,align:'right'">Comparison YTD</th>
                <th data-options="field:'unitcost',width:132,align:'right'">Average</th>
                <th data-options="field:'status',width:122,align:'center'">Status</th>
			</tr>
		</thead>
	</table>
	<script type="text/javascript" src="js/datagrid-filter.js"></script>
	<script type="text/javascript">
	loadDoubleClkSpendSummary();
	var data = [
	            {"productid":"2","unitcost":2.50,"status":"P","listprice":3.00,"itemid":"Air"},
	            {"productid":"1","unitcost":3,"status":"P","listprice":5,"itemid":"Hotel"},
	            {"productid":"3","unitcost":5,"status":"N","listprice":7,"itemid":"Car"},
	            {"productid":"5.5","unitcost":3.75,"status":"P","listprice":2,"itemid":"Rail"}
	        ];
		$(function() {
			var dg = $('#dg').datagrid();
			dg.datagrid('enableFilter', [ {field : 'listprice', type : 'numberbox',
				options : {precision : 1},
				op : [ 'equal', 'notequal', 'less', 'greater' ]
			}, {
				field : 'unitcost', type : 'numberbox',
				options : {precision : 1},
				op : [ 'equal', 'notequal', 'less', 'greater' ]
			}, {
				field : 'status', type : 'combobox',
				options : {panelHeight : 'auto',
					data : [ {value : '', text : 'All'
					}, {value : 'P', text : 'P'
					}, {value : 'N', text : 'N'
					} ],
					onChange : function(value) {
						if (value == '') {
							dg.datagrid('removeFilterRule', 'status');
						} else {
							dg.datagrid('addFilterRule', {
								field : 'status',
								op : 'equal',
								value : value
							});
						}
						dg.datagrid('doFilter');
					}
				}
			} ]);
		});
	</script>
